<template>
  <div class="qc">
    <div class="top-menu">
      <span class="menu" @click="commBtn" v-bind:class="{'active': showComment}">评论</span>
      <span class="menu" @click="questionBtn" v-bind:class="{'active': showQuestion}">问答</span>
    </div>
    <div class="bottom-show">
      <div v-if="showComment">
        <el-card class="card comment-div" v-for="item in comments" :key="item.commentId">
          <div class="left-image">
            <el-avatar :src="item.imageUrl"></el-avatar>
          </div>
          <div class="right-content">
            <div class="name">
              <a>{{item.nickname}}</a>
            </div>
            <div class="content-div">
              {{item.content}}
            </div>
            <div class="bottom-option">
              <div class="sectionName">课程：
                <span @click="toLearn(item.sectionId, item.courseId)">{{item.sectionName}}</span>
              </div>
              <div class="creatTime">{{item.createTime}}</div>
            </div>
          </div>
        </el-card>
      </div>
      <div v-if="showQuestion" class="question_div">
        <el-card class="card" v-for="item in questions" :key="item.questionId">
          <div class="left-image">
            <el-avatar :src="item.imageUrl"></el-avatar>
            <div class="name">
              <a>{{item.nickname}}</a>
            </div>
          </div>
          <div class="right-content">
            <div class="title">
              <span @click="toQuestion(item.questionId)">{{item.title}}</span>
            </div>
            <div class="content-div" v-if="item.aUserId!=null">
              <div>
                <span v-if="item.adoption==0">最新回答</span>
                <span v-else style="color: green">已采纳回答</span>
                /
                <span>{{item.aNickname}}</span>
              </div>
              <div v-html="item.aContent">
              </div>
            </div>
            <div v-else>
              <router-link :to="{ path: '/question', query: { questionId: item.questionId }}" style="font-weight: bold">
                <el-button>点我回答</el-button>
              </router-link>
            </div>
            <div class="bottom-option">
              <div class="di">
                <span>{{item.answerSize}}</span>
                <span style="margin-left: 5px">回答</span>
              </div>
              <div class="sectionName">课程：
                <span @click="toLearn(item.sectionId, item.courseId)">{{item.sectionTitle}}</span>
              </div>
              <div class="creatTime">{{item.createTime}}</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'CourseQC',
  props: ['courseId', 'isStudy'],
  data () {
    return {
      showComment: true,
      showQuestion: false,
      comments: [],
      questions: []
    }
  },
  mounted () {
    this.getListComment()
    this.getListQuestion()
  },
  computed: mapState({
    user: 'user'
  }),
  methods: {
    commBtn () {
      this.showComment = true
      this.showQuestion = false
    },
    questionBtn () {
      this.showComment = false
      this.showQuestion = true
    },
    getListComment () {
      var _this = this
      var commentQueryData = {}
      commentQueryData.courseId = this.courseId
      if (this.$route.query.sectionId != null) {
        commentQueryData.sectionId = this.$route.query.sectionId
      }
      this.$axios.post('/api/comment/getListComment',
        this.$qs.stringify({
          commentQueryData: JSON.stringify(commentQueryData)
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          var result = data.result
          _this.comments = result
        }
      })
    },
    getListQuestion () {
      var _this = this
      var queryData = {}
      queryData.courseId = this.courseId
      if (this.$route.query.sectionId != null) {
        queryData.sectionId = this.$route.query.sectionId
      }
      this.$axios.post('/api/question/getListQuestion',
        this.$qs.stringify({
          queryData: JSON.stringify(queryData)
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          var result = data.result
          _this.questions = result
        }
      })
    },
    toLearn (sectionId, courseId) {
      var _this = this
      // studySection 操作 ★★★★★★★★★
      this.$axios.post('/api/studied/studySection',
        this.$qs.stringify({
          courseId: courseId,
          sectionId: sectionId,
          userId: this.user.userId
        })
      ).then(function (response) {
        var data = response.data
        if (data.isSuccess) {
          _this.$router.push(
            {path: '/video',
              query: {
                sectionId: sectionId,
                courseId: courseId,
                path: _this.$route.fullPath
              }
            }
          )
        }
      })
    },
    toQuestion (questionId) {
      this.$router.push(
        {path: '/question',
          query: {
            questionId: questionId
          }
        }
      )
    }
  }
}
</script>

<style>
  .qc{
    text-align: left;
  }
  .qc .top-menu{
    position: relative;
    margin-bottom: 30px;
  }
  .top-menu .menu{
    margin-right: 15px;
    padding: 4px 12px;
    font-size: 12px;
    color: #545c63;
    line-height: 16px;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
  }
  .top-menu .active{
    color: #FFFFFF;
    background: #9199a1;
    cursor: default;
  }
  .bottom-show .card{
    margin-bottom: 13px;
  }
  .card .left-image{
    width:80px;
    text-align: center;
    float: left;
  }
  .comment-div .right-content {
    padding: 0px 20px;
    min-height: 85px;
    position: relative;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
  }
  .question_div .right-content {
    padding: 0px 20px;
    min-height: 85px;
    position: relative;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
  }
  .content-div{
    min-height: 60px;
  }
  .right-content .name {
    margin-bottom: 5px;
    font-weight: bolder;
  }
  .bottom-option{
    margin-top: 10px;
    color: #93999f;
    font-size: 14px;
  }
  .di{
    display: inline-block;
  }
  .right-content .sectionName{
    display: inline-block;
  }

  .right-content .sectionName span{
    cursor: pointer;
  }
  .right-content .sectionName span:hover{
     color: #67C23A;
    font-weight: bold;
   }
  .right-content .creatTime{
    display: inline-block;
    float:right;
  }
  .question_div .title{
    margin-bottom: 10px;
  }
  .question_div .title span{
    cursor: pointer;
    font-weight: bold;
  }
  .question_div .content-div{
    color: gray;
    border-left: 3px solid #aaa;
    font-size: 14px;
    padding-left: 20px;
     }
</style>
